<script>
export default {
    name: "LogCard",
    data() {
        return {
            item: {
                updateTime: '2022-1-3',
                title: '深深的爱，淡淡的香',
                summary: '一朵花，皎洁，素雅，渐渐地演变成了一幅画，印在了记忆的长河里。那花，叶细长，翠翠的，花开时伸出一只长长的颈，花儿在颈上绽开，花瓣不多，色浅浅的，似白玉般温润、玲珑，淡淡的香气从花蕊中溢出，香薰满屋，沁人肺腑，令人心广神怡，使人宁静安详。'
            }
        }
    },
    methods: {
        getYear(date) {
            return date.split("-")[0];
        },
        getDay(date) {
            const arr = date.split("-")
            return arr[1].concat("-", arr[2]);
        }
    }
}
</script>

<template>
    <div class="flex row   space-around " style="width: 1200px;height: 300px;margin: 30px 0">
        <div class="flex column center align-center" style="width: 76px;height: 100px">
            <span style="font-size: 24px;color: #626971;width: 100%">{{ getYear(item.updateTime) }}</span>
            <span style="text-align: left;font-size: 14px;color: #626971;width: 100%">{{
                    getDay(item.updateTime)
                }}</span>
        </div>
        <el-divider  style="height: 300px;" direction="vertical"/>
        <div class="flex column space-between" style="width: 900px">
            <span class="title">{{ item.title }}</span>
            <span class="summary">{{ item.summary }}</span>
            <div class="flex row space-between">
                <img src="/resume/index/log1.png" alt="" style="width: 290px;height: 170px;border-radius: 6px">
                <img src="/resume/index/log1.png" alt="" style="width: 290px;height: 170px;border-radius: 6px">
                <img src="/resume/index/log1.png" alt="" style="width: 290px;height: 170px;border-radius: 6px">
            </div>
        </div>
    </div>
</template>

<style scoped>
.title {
    font-size: 16px;
    color: #333;
    text-decoration: none;
    font-weight: normal;
    cursor: pointer;
}

.title:hover {
    color: rgb(255, 192, 1);
}

.summary {
    line-height: 26px;
    color: #878787;
    white-space: normal;
    margin-top: 14px;
    font-size: 14px;
}
</style>
